<template>
    <view class="item">
        <view class="left">
            <image class="" src="" />
        </view>
        <view class="right">
            <view class="top_text">
                <view class="storeName"><text>{{ infos?.name }}</text></view>
                <view class="distance">距您<text>{{ Number(infos?.distance).toFixed(2) }}</text>km</view>
            </view>
            <view class="bootom_text">
                <view class="address"><text>{{ infos?.address }}</text></view>
                <view class="icon_list">
                    <view class="icon" @click.stop="handlePhone(infos?.contact as string)">
                        <image class="" src="/static/images/nearbyStore/tel.png" />
                    </view>
                    <view class="icon" @click.stop>
                        <picker @change="bindPickerChange" :value="index" :range="arrayMap" @click.stop>
                            <view class="icon">
                                <image class="" src="/static/images/nearbyStore/toWhere.png" />
                            </view>
                        </picker>
                    </view>
                </view>
            </view>
        </view>

    </view>
</template>
<script setup lang="ts">
import { ref, onMounted, computed, } from 'vue'
import type { StoreInfo } from "@/store/modules/store";
import { useCityStore } from "@/store/modules/city";
const cityStore = useCityStore();

const emit = defineEmits<{
    (e: 'handleCard', data: StoreInfo): void,
    (e: 'handlePhone', data: StoreInfo): void,
    (e: 'handleToWhere', data: StoreInfo): void
}>()

//定义带有默认值的 props
const props = withDefaults(defineProps<{
    infos: StoreInfo
}>(), {
    infos: () => ({} as StoreInfo),
})

const handlePhone = (phone: string) => {
    // 验证电话号码格式
    if (!/^1[3-9]\d{9}$/.test(phone)) {
        uni.showToast({
            title: '电话号码不正确',
            icon: 'none'
        });
        return;
    }
    uni.makePhoneCall({
        phoneNumber: phone, //仅为示例，并非真实的电话号码
        success: () => {
            console.log('拨打成功');
        },
        fail: () => {
            console.log('拨打失败');
        }
    });
    // emit('handlePhone', props.infos)
}


// 去导航
const isIos = computed(() => {
    return uni.getSystemInfoSync().platform === 'ios';
});
const arrayMap = ['百度地图', '高德地图', '腾讯地图'];
const index = ref(0);
const openMapApp = (type: any) => {
    let url = '';
    let appName = '';
    const startLat = cityStore.currentLatitude; // 起点纬度
    const startLng = cityStore.currentLongitude; // 起点经度
    const targetLat = 34.7466; // 终点纬度（示例值）
    const targetLng = 113.6254; // 终点经度（示例值）
    const targetAddress = '河南省郑州市二七区人民政府'; // 终点地址（示例值）
    switch (type) {
        case 'amap':
            // 高德地图
            appName = '高德地图';
            if (isIos.value) {
                // iOS 端 URL Scheme
                url = `iosamap://navi?sourceApplication=applicationName&lat=${targetLat}&lon=${targetLng}&dev=0&style=2`;
            } else {
                // Android 端 URL Scheme
                url = `amapuri://route/plan?sourceApplication=appname&slat=${startLat}&slon=${startLng}&dlat=${targetLat}&dlon=${targetLng}&dname=${targetAddress}&dev=0&t=0`;
            }
            break;

        case 'baidu':
            // 百度地图
            appName = '百度地图';
            if (isIos.value) {
                url = `baidumap://map/direction?origin=latlng:${startLat},${startLng}|name:当前位置&destination=latlng:${targetLat},${targetLng}|name:${targetAddress}&mode=driving&coord_type=gcj02`;
            } else {
                url = `bdapp://map/direction?origin=latlng:${startLat},${startLng}|name:当前位置&destination=latlng:${targetLat},${targetLng}|name:${targetAddress}&mode=driving&coord_type=gcj02`;
            }
            break;

        case 'tencent':
            // 腾讯地图
            appName = '腾讯地图';
            const coordType = isIos.value ? 1 : 0; // 1-GCJ-02坐标 0-WGS84坐标
            // url = `qqmap://map/routeplan?type=drive&from=${startLat},${startLng},当前位置&to=${targetLat},${targetLng},${targetAddress}&coord_type=${coordType}`;
            // url = `qqmap://map/routeplan?type=drive&from=${startLat},${startLng},当前位置&to=${targetLat},${targetLng}&coord_type=${coordType}`;
            url = `qqmap://map/routeplan?type=drive&from=${startLat},${startLng},当前位置&to=${targetAddress}&coord_type=${coordType}`;
            break;
    }
    console.log(url, appName);

    launchApp(url, appName)
}
const launchApp = (url: string, appName: string) => {
    // #ifdef APP-PLUS
    plus.runtime.openURL(url, (res) => {
        console.log('打开应用失败：', res);
        uni.showToast({
            title: `未安装${appName}或打开失败`,
            icon: 'none'
        });
    });
    // #endif

    // 非App平台提示
    // #ifndef APP-PLUS
    uni.showToast({
        title: '该功能仅支持App端',
        icon: 'none'
    });
    // #endif
}
const chooseMapApp = (type: any) => {
    checkAppInstalled(type).then(() => {
        console.log(`已安装${arrayMap[index.value]}`);

        openMapApp(type);
    }).catch(() => {
        uni.showToast({
            title: `未安装${arrayMap[index.value]}或打开失败`,
            icon: 'none'
        });
    });
    // emit('handleToWhere', props.infos)
}

const checkAppInstalled = (scheme: any) => {
    const pname = scheme === 'baidu' ? (isIos.value ? 'baidumap' : 'com.baidu.BaiduMap') : scheme === 'amap' ? (isIos.value ? 'iosamap' : 'com.autonavi.minimap') : scheme === 'tencent' ? (isIos.value ? 'qqmap' : 'com.tencent.map') : '';
    const schemeName = scheme === 'baidu' ? 'baidumap' : scheme === 'amap' ? 'iosamap' : scheme === 'tencent' ? 'qqmap' : '';
    return new Promise((resolve, reject) => {
        // #ifdef APP-PLUS
        if (plus.runtime.isApplicationExist({
            pname: pname, // Android包名或iOS的URL Scheme
            action: schemeName
        })) {
            resolve(true);
        } else {
            reject();
        }
        // #endif
        // 非App平台默认返回未安装
        // #ifndef APP-PLUS
        resolve(true)
        // #endif
    });
}
const bindPickerChange = (e: any) => {
    index.value = e.detail.value;
    const selectMap = arrayMap[index.value];
    const type = index.value === 0 ? 'baidu' : index.value === 1 ? 'amap' : 'tencent';
    if (selectMap) {
        chooseMapApp(type)
        uni.showToast({
            title: `正在跳转到${selectMap}`,
            icon: 'none'
        });
    }
};

</script>
<style lang="less" scoped>
.item {
    width: 688rpx;
    height: 173rpx;
    background: #ffffff;
    border-radius: 23rpx 23rpx 23rpx 23rpx;
    box-sizing: border-box;
    padding: 31rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    // gap:20rpx;
    .left {
        width: 112rpx;
        height: 112rpx;
        overflow: hidden;
        background: #ffffff;
        box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(5, 156, 121, 0.25);
        border-radius: 50%;
        border: 2rpx solid #00cdcd;
        margin-right: 13rpx;
        flex-grow: 0;
        flex-shrink: 0;
    }

    .right {
        width: 486rpx;
        display: flex;
        flex-direction: column;
        gap: 10rpx;

        .top_text {
            height: 38rpx;
            line-height: 38rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;


            .storeName {
                width: 313rpx;
                height: 38rpx;
                overflow: hidden;
                font-size: 32rpx;
                color: #333333;
                font-weight: 500;
                font-size: 27rpx;
                text-align: left;
                overflow: hidden;
                white-space: nowrap;
            }

            .distance {
                flex: 1;
                height: 38rpx;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                text-align: right;
                padding-right: 10rpx;
                font-weight: 500;
                font-size: 23rpx;
                color: #8C8C8C;
                text{
                    // width: 50rpx;
                    overflow: hidden;
                    white-space: nowrap;
                    // text-overflow: ellipsis;
                }
            }
        }

        .bootom_text {
            height: 75rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .address {
                width: 313rpx;
                white-space: wrap;
                font-weight: 500;
                font-size: 21rpx;
                color: #333333;
                line-height: 35rpx;
                text-align: left;

            }

            .icon_list {
                width: 94rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-right: 20rpx;

                .icon {
                    width: 27rpx;
                    height: 27rpx;

                    image {
                        width: 100%;
                        height: 100%;
                        display: block;
                    }
                }
            }
        }
    }





}
</style>
